.btn类设计用于button元素。但是，您也可以在a或input元素上使用这些类。下面是几个例子及效果，从外观上来看几乎没什么区别。一般情况下，按钮要设置颜色，否则不容易分辨。

按钮的颜色设置非常简单，和前面的颜色都是通用的，只是前缀改成了bt-，另外还有种链接样式，如下例子

一般来说，按钮是长度可变的，文字不会换行，但当上级容器设置了宽度且宽度不满足按钮长度的时候，按钮文本会自动换行，如果不希望按钮文本换行，可以将 .text-nowrap类添加到按钮。

从这个例子中我们可以看出三点

需要一个按钮，却不需要它们带来的厚重背景色？将默认修饰符类替换为.btn-outline-*类，以删除任何按钮上的所有背景图像和颜色。

喜欢大的还是小的按钮？添加.btn-lg 或者 .btn-sm以获得其他尺寸。

通过向任何button元素添加disabled属性，使按钮看起来不起作用。

使用a元素禁用的按钮的行为有些不同：

可能不细心地朋友看不出来，button的disabled是加在class外面的，是html属性。a是加在class内的，是css样式类。tabindex="-1"是禁止通过键盘激活链接，aria-disabled="true"是指示辅助技术的元素状态（比如盲文阅读器）。

混合使用display和gap通用类别，建立跟Bootstrap 4一样的响应式、满版的的内存块级别按钮堆叠。透过使用通用类别而非指定button class，你可以更好的控制间距、对齐以及响应式等行为。

可以使用网格系统的栏（column）类别来调整内存块级别按钮的宽度。举例来说，可以用.col-6建立宽度50%的内存块级别按钮，再用.mx-auto将其水平置中。当然，你可以将col-6中的6改为1-12，得到不同宽度的按钮。

以下为一个响应式的示例，从垂直堆叠的按钮群组开始，直到遇到md断点才会把.d-grid替换为.d-md-block，进而使gap-2通用类别无效化。你可以缩放浏览器的大小以观察它们的改变，我这里就不演示了。

方向为水平时，可以添加弹性盒子通用类别来对齐、调整按钮。以下使其在非堆叠的情况下对齐右边。

加入data-bs-toggle="button"来切换按钮的active状态。如果想要预先切换按钮状态，则必须手动添加.active以及aria-pressed="true"以确保状态有正确的传达至辅助性技术。

从效果来看，激活的按钮颜色更深一些。

可以使用按钮构造函数创建按钮实例，例如：

方法

例如，切换所有按钮

有兴趣的朋友可以自己完善代码试验一下。

今天的课程就到这里，请关注我，及时学习 俺老刘原创的《Bootstrap5零基础到精通》第20节 Bootstrap5按钮组Button group组件用法，从字面也可以看出，按钮组就是多个按钮的组合。